import React from 'react';
import {Icon, Menu, Dropdown, Badge} from 'antd';
import { Link } from 'react-router'
import styles from './index.less';
import { userLogout } from '../../actions/index'

const SubMenu = Menu.SubMenu;  // 为了使用方便

/**
 * 定义Header组件, 包括登录/注销的链接, 以及一些自定义链接
 */
class Header extends React.Component {

  logoutClick(e) {
    e.preventDefault();
    this.props.dispatch(userLogout.request()());
  }

  render() {
    let { isHavingUnread } = this.props;
    return (
        <Menu className={styles.header} mode="horizontal">
          <SubMenu title={<span><Icon type="user" />{this.props.userName}</span>}>
            <Menu.Item key="logout">
              <a href="" onClick={this.logoutClick.bind(this)}>退出</a>
            </Menu.Item>
          </SubMenu>
          <Menu.Item key="notification">
            <Link to="/notification"><Badge dot={isHavingUnread}><Icon type="notification" />通知</Badge></Link>
          </Menu.Item>
        </Menu>
    );
  }

}

export default Header;
